<template>
  <div class="area">
    <!-- <el-button v-show="!show && !defShow" type="text" @click="show=true">{{ areaLabel }}</el-button> -->
    <el-cascader v-show="show || defShow" ref="area" v-model="ids" :placeholder="placeholder" :props="props" @change="change" />
  </div>
</template>
<script>
import axios from 'axios'
var provinces = require('./province.json')

export default {
  name: 'FormArea',
  props: {
    value: {// 设置value为props属性-必须
      type: [String],
      default: ''
    },
    level: {
      type: Number,
      default: 3
    },
    changeOnSelect: {
      type: Boolean,
      default: false
    },
    area: {
      type: String,
      default: ''
    },
    defShow: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      // id:this.value,//双向绑定值-必须
      loadingStatus: false,
      url: 'http://ali-city.showapi.com/areaDetail',
      form: [],
      props: {
        lazy: true,
        checkStrictly: false
      },
      show: true
    }
  },
  computed: {
    ids: {
      get: function() {
        const arr = []
        if (this.value == null) {
          return []
        }
        this.value.split(',').forEach(i => {
          arr.push(parseInt(i))
        })
        return arr
      },
      set: function(val) {

      }
    },
    areaLabel: {
      get: function() {
        if (String.isNullOrEmpty(this.area)) {
          return '请选择地区'
        }
        return this.area
      }
    }
  },
  mounted() {
    this.init()
  },
  created() {
    // const that = this
    this.props.lazyLoad = this.loadData
  },
  methods: {
    init() {
      this.props.lazyLoad = this.loadData
      this.props.checkStrictly = this.ChangeOnSelect
    },
    change(value) {
      this.$emit('input', value.toString())
      console.log(this.$refs['area'].getCheckedNodes())
      const area = this.$refs['area'].getCheckedNodes()[0].pathLabels.join('/')
      this.$emit('set-area', area)
      this.show = true
    },
    loadData(node, resolve) {
      // console.log(node)
      if (node.level === 0) {
        this.loadProvince(node, resolve)
        return
      }
      this.loadArea(node, resolve)
    },
    loadProvince(node, resolve) {
      const that = this
      const childrens = []
      provinces.data.forEach(item => {
        const option = { value: parseInt(item.id), label: item.areaName, leaf: node.level >= that.level }
        childrens.push(option)
      })
      resolve(childrens)
    },
    loadArea(node, resolve) {
      const that = this
      axios.get(that.url, {
        headers: { 'Content-Type': 'application/json; charset=utf-8', 'Authorization': 'APPCODE 8fc9fbfc5478413e9a416cbc2022d9bd' },
        params: { parentId: node.value }
      })
        .then((res) => {
          const data = res.data.showapi_res_body.data
          // console.log(data)
          const childrens = []
          data.forEach(item => {
            const leaf = parseInt(item.level) >= that.level
            // console.log(item.level +'-'+ that.level)
            const citem = { value: parseInt(item.id), label: item.areaName, leaf: leaf }
            childrens.push(citem)
          })
          // console.log(childrens)
          resolve(childrens)
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>
<style scoped>
.el-cascader{
    width: 100%;
}
</style>
